<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
                                            <el-form-item label="">
                            <el-input v-model="params.entity.id"
                                      placeholder="请输入"/>
                        </el-form-item>
                        <el-form-item label="题集编号">
                            <el-input v-model="params.entity.collectId"
                                      placeholder="请输入题集编号"/>
                        </el-form-item>
                        <el-form-item label="最低分数">
                            <el-input v-model="params.entity.minScore"
                                      placeholder="请输入最低分数"/>
                        </el-form-item>
                        <el-form-item label="最高分数">
                            <el-input v-model="params.entity.maxScore"
                                      placeholder="请输入最高分数"/>
                        </el-form-item>
                        <el-form-item label="结果说明">
                            <el-input v-model="params.entity.resultTitle"
                                      placeholder="请输入结果说明"/>
                        </el-form-item>
                        <el-form-item label="结果描述">
                            <el-input v-model="params.entity.resultDesc"
                                      placeholder="请输入结果描述"/>
                        </el-form-item>
                        <el-form-item label="状态 0-停用 1-启用 2-备用">
                            <el-input v-model="params.entity.statusFlag"
                                      placeholder="请输入状态 0-停用 1-启用 2-备用"/>
                        </el-form-item>
                        <el-form-item label="是否删除 0-否 1-是">
                            <el-input v-model="params.entity.delFlag"
                                      placeholder="请输入是否删除 0-否 1-是"/>
                        </el-form-item>
                        <el-form-item label="创建人">
                            <el-input v-model="params.entity.createUser"
                                      placeholder="请输入创建人"/>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-input v-model="params.entity.createTime"
                                      placeholder="请输入创建时间"/>
                        </el-form-item>
                        <el-form-item label="修改时间">
                            <el-input v-model="params.entity.updateTime"
                                      placeholder="请输入修改时间"/>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="params.entity.remark"
                                      placeholder="请输入备注"/>
                        </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
                        <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <el-table v-loading="loading"
                  :data="tableData.list" style="width: 100%" height="500"
                  :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
            <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="id" label=""
                                 show-overflow-tooltip/>
                <el-table-column prop="collectId" label="题集编号"
                                 show-overflow-tooltip/>
                <el-table-column prop="minScore" label="最低分数"
                                 show-overflow-tooltip/>
                <el-table-column prop="maxScore" label="最高分数"
                                 show-overflow-tooltip/>
                <el-table-column prop="resultTitle" label="结果说明"
                                 show-overflow-tooltip/>
                <el-table-column prop="resultDesc" label="结果描述"
                                 show-overflow-tooltip/>
                <el-table-column prop="statusFlag" label="状态 0-停用 1-启用 2-备用"
                                 show-overflow-tooltip/>
                <el-table-column prop="delFlag" label="是否删除 0-否 1-是"
                                 show-overflow-tooltip/>
                <el-table-column prop="createUser" label="创建人"
                                 show-overflow-tooltip/>
                <el-table-column prop="createTime" label="创建时间"
                                 show-overflow-tooltip/>
                <el-table-column prop="updateTime" label="修改时间"
                                 show-overflow-tooltip/>
                <el-table-column prop="remark" label="备注"
                                 show-overflow-tooltip/>

            <el-table-column fixed="right" label="操作" width="300" show-overflow-tooltip>
                <template #header>
                    <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>
                </template>
                <template #default="scope">
                    <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除</el-button>
                    <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                       :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </el-card>

    <!-- 新增或者修改页面-->
    <DepressCollectResultAddOrEdit
            @closeEditDialog="closeEditDialog"
            :addOrEditVisible="addOrEditVisible"
            :ruleForm="ruleForm"
            :addDataType="addDataType"></DepressCollectResultAddOrEdit>
</template>

<script lang="ts" setup>
    import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
    import {onMounted, computed, reactive, ref} from 'vue'
    import {Params, Result} from "@/apis/model/common/common.interfaces"
    import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
    import DepressCollectResultAddOrEdit from './depressCollectResultAddOrEdit.vue'
    import {DepressCollectResult}
        from "@/apis/model/exam/DepressCollectResultModel";
    import {deleteDepressCollectResultById, depressCollectResultPage} from "@/apis/http/exam/DepressCollectResultHttp";

    // 查询
    const params: Params = reactive({
        current: 1,
        size: 10,
        search: '',
        entity: {} 
    })

    const ruleForm = ref < DepressCollectResult > ({}  as DepressCollectResult )

    // AddOrEditVisible
    const addOrEditVisible = ref(false)

    // table 表数据
     const tableData: any =  ref({}); 

    // 加载数据
    const loading = ref(true)
    const addDataType = ref('add');

    /**
     * 初始化数据
     */
    const initList = () => {
        loading.value = true
        depressCollectResultPage(params).then((res: Result) => {
            const code = res.code
            const message = res.message
            const data = res.data
            if (code == 200) {
                tableData.value = data
            }
            loading.value = false
        })
    }

    /**
     * search 查询数据
     */
    const searchData = () => {
        initList()
    }

    /**
     * 每页数据量改变查询数据
     * @param val
     */
    const handleSizeChange =  (val: number) => { 
    params.size = val
    initList()
     } 

    /**
     * 分页查询数据
     * @param val
     */
    const handleCurrentChange =  (val: number) => {
    params.current = val
    initList()
     } 

    /**
     * 添加弹出
     */
    const addDialog = () => {
        addOrEditVisible.value = true
        ruleForm.value =  {}    as  DepressCollectResult
        addDataType.value = 'add'
    }

    //修改弹窗
    const editDialog = (row:
    DepressCollectResult
    ) =>{
    addOrEditVisible.value = true
    ruleForm.value = row
    addDataType.value = 'edit'
    }

    // 关闭修改弹窗
    const closeEditDialog =  (e: any) => { 
    addOrEditVisible.value = e.addOrEditVisible
    if (e.refushList = true) {
        params.current = 1;
        initList();
          } 
    }

    /**
     * 弹出删除对话框
     */
    const showDeleteDialog =  (id: number) => { 
    ElMessageBox.confirm(
        '是否删除?',
        '提醒',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteDepressCollectResultById(id).then((res: Result) => {
            const code = res.code;
            if (code == 200) {
                ElMessage({
                    message: '删除数据成功！',
                    type: 'success',
                })
                initList();
            } else {
                ElMessage.error('删除数据失败！');
            }
        })
    }).catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
    })
     } 

    onMounted(() => {
        initList()
    })
</script>

<style>
</style>
